<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>

<form onsubmit="return false;" >
<div class="layui-form layuimini-form">
   <div class="layui-form layuimini-form">
   	<div class="layui-form-item">
   		<label class="layui-form-label required">账号</label>
   		<div class="layui-input-block">
   			<input type="text" name="username" id="username" lay-verify="isExist"  lay-reqtext="用户名不能为空" placeholder="请输入用户名" value="" class="layui-input">
   			<tip>填写自己管理账号的名称。</tip>
   		</div>
   	</div>
       <div class="layui-form-item">
           <label class="layui-form-label required">密码</label>
           <div class="layui-input-block">
               <input type="password" name="password" lay-verify="required" lay-reqtext="用户密码不能为空" placeholder="用户密码不能为空" value="" class="layui-input">
           </div>
       </div>
   	<div class="layui-form-item">
   		<label class="layui-form-label required">性别</label>
   		<div class="layui-input-block">
   			<input type="radio" name="sex" value="1" title="男" checked="">
   			<input type="radio" name="sex" value="0" title="女">
   		</div>
   	</div>
       <div class="layui-form-item">
           <label class="layui-form-label required">真实姓名</label>
           <div class="layui-input-block">
               <input type="text" name="realname"  lay-verify="required" lay-reqtext="真实姓名" placeholder="请输入真实姓名" value="" class="layui-input">
           </div>
       </div>
       <div class="layui-form-item">
           <label class="layui-form-label required">身份证</label>
           <div class="layui-input-block">
               <input type="text" name="idcard" lay-verify="required|isExist" lay-reqtext="身份证" placeholder="请输入身份证" value="" class="layui-input">
           </div>
       </div>
   	<div class="layui-form-item">
   		<label class="layui-form-label required">手机</label>
   		<div class="layui-input-block">
   			<input type="number" name="phone" lay-verify="required" lay-reqtext="手机不能为空" placeholder="请输入手机" value="" class="layui-input">
   		</div>
   	</div>
   	<div class="layui-form-item">
   		<label class="layui-form-label">邮箱</label>
   		<div class="layui-input-block">
   			<input type="email" name="email" placeholder="请输入邮箱" value="" class="layui-input">
   		</div>
   	</div>
	   <div class="layui-form-item">
		   <input type="hidden" name="deptId"  value="" class="layui-input">
		   <label class="layui-form-label required">部门</label>
		   <div class="layui-input-block">
			   <input type="text" name="deptName" required lay-reqtext="用户部门不能为空" placeholder="请选择部门" value="" class="layui-input">
		   </div>
	   </div>
   	<div class="layui-form-item">
   		<label class="layui-form-label">职业</label>
   		<div class="layui-input-block">
   			<input type="text" name="work" placeholder="请输入职业" value="" class="layui-input">
   		</div>
   	</div>
   	<div class="layui-form-item layui-form-text">
   		<label class="layui-form-label">备注信息</label>
   		<div class="layui-input-block">
   			<textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
   		</div>
   	</div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" id="save" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
</div>
</form>
<div style="display: none" class="layuitree">
	<div style="padding:30px">
		<div class="layui-form-item">
			<div>
				<input type="text" name="deptNameDemo" disabled placeholder="请选择部门" value="" class="layui-input">
			</div>
		</div>
		<div class="layuimini-container">
			<div class="layuimini-main" style="width: 90%">
				<div id="test1" class="demo-tree demo-tree-box"></div>
			</div>
		</div>
	</div>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/jquery-1.12.1.min.js"></script>
<script src="/js/common.js" charset="utf-8"></script>
<script>
    layui.use(['form','tree'], function () {
        var form = layui.form,
            layer = layui.layer,
				tree=layui.tree,
            $ = layui.$;

		var url = decodeURI(window.location.href);
		var argsIndex = url.split("?obj=");
		var arg = argsIndex[1];
		if(arg!==undefined || arg!==''){
			let deptData=api.getDeptModelById(arg);
			$('input[name="deptId"]').val(deptData.data.id);
			$('input[name="deptName"]').val(deptData.data.deptName);
		}


		//layui监听input内容变动简单粗暴
		$(function(){
			//输入框的值改变时触发
			$("#username").on("input",function(e){
				//获取input输入的值
				let username=e.delegateTarget.value;
				let obj=api.userIsExist(username);
				if(obj.code===1){
					layer.msg(obj.msg)
				}
			});
		});

		let dataObj=api.getDepteModelTreeList();

		//常规用法
		tree.render({
			elem: '#test1' //默认是点击节点可进行收缩
			,data: dataObj.data.list
			,click: function(obj){
				$('input[name="deptNameDemo"]').val(obj.data.title);
				$('input[name="deptId"]').val(obj.data.id);
				$('input[name="deptName"]').val(obj.data.title);
			}
		});

		$('input[name="deptName"]').click(function() {
			var index = layer.open({
				title: '选择部门',
				type: 1,
				shade: 0.2,
				maxmin:true,
				shadeClose: true,
				btn:['确定','取消'],
				area: ['50%', '70%'],
				content: $(".layuitree"),
				end:function(){

				}
			});
		});


        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let obj=api.saveAddUserModel(data.field);
			layer.msg(obj.msg)
            if(obj.code===0){
				var iframeIndex = parent.layer.getFrameIndex(window.name);
				parent.layer.close(iframeIndex);
			}else {
				return false;
			}
        });

    });
</script>
</body>
</html>